<template>
	<div class="freight">
		<div class="desc" v-show="!setShow">
			<div class="title" v-loading="loading">				
				<el-form ref="form"   label-width="80px">
					<el-form-item label="订单费用">
						<p class="title-info" v-for="(item,index) in initFee">
							{{item.destination_name}} 首{{item.start_standard}}件 {{item.start_fee}}元 续{{item.add_standard}}件 {{item.add_fee}}元					
						</p>	
				  </el-form-item>
				</el-form>						
			</div>	
			<div class="btn"  @click="handleSetShow">设置运费</div>		
		</div>
		<div class="set" v-show="setShow">
			<p class="title"><span>运费管理</span>/<span>运费计算方法设置</span></p>
			<div class="set-con">
				<div class="label">订单运费计算方法</div>
				<div class="right">
					<template>
					  <el-radio v-model="radio" label="1">固定运费</el-radio>
					  <el-radio v-model="radio" label="2">运费模板</el-radio>
					</template>
					<div class="set-ipt" v-show="radio === '1'">
						<p class="set-desc">固定运费:所有订单统一一个运费</p>
						<span>运费设置</span>&nbsp;&nbsp;&nbsp;&nbsp;
						<el-input style="width: 400px;" v-model="price" placeholder="请输入内容"></el-input> 元/单									
					</div>					
					<div class="set-ipt" v-show="radio === '2'">
						<p class="set-desc">固定运费:所有订单统一一个运费</p>
						<div class="set-more">
							<span class="set-title">运费模板设置</span>
							<div class="set-form">
								<!-- 统一运费  start -->
								<el-row style="height: 50px;line-height: 50px;border-bottom: 1px solid #f6f8f9;">
								  <el-col :span="8"><div class="">配送区域</div></el-col>				  
								  <el-col :span="4"><div class="">首N件</div></el-col>
								  <el-col :span="4"><div class="">首费(￥)</div></el-col>
								  <el-col :span="4"><div class="">续M件</div></el-col>
								  <el-col :span="4"><div class="">续费(￥)</div></el-col>
								</el-row>							
								<el-row style="height: 50px;line-height: 50px;border-bottom: 1px solid #f6f8f9;">
								  <el-col :span="8"><div class="">全国默认地区</div></el-col>				  
								  <el-col :span="4">
								 	<el-input size="mini" type="number" v-model="startQuantity"></el-input>
								  </el-col>				  
								  <el-col :span="4">
								 	<el-input size="mini" type="number" v-model="startPrice"></el-input>
								  </el-col>				 
								  <el-col :span="4">
								 	<el-input size="mini" type="number" v-model="addQuantity"></el-input>
								  </el-col>				  
								  <el-col :span="4">								 	
								  	<el-input size="mini" type="number" v-model="addPrice"></el-input>
								  </el-col>
								</el-row>
								<!-- 统一运费   end -->
								<!-- 自定义区域的运费  start -->							
								<el-row v-for="(item,index) in areaLength" :align="'middle'" :key="index" style="line-height: 50px;border-bottom: 1px solid #f6f8f9;">
								  <el-col :span="8">
								  	<div class="edit-title" style="min-height: 50px;">指定地区 
								  		<span class="edit-btn" @click="editArea(index)">编辑</span>
								  		<span class="edit-btn" @click="deletaArea(index)">删除</span>  
								  		<p v-if="!item.nameList.length">{{customArea}}</p>
								  		<p>
								  			<span v-for="items in item.nameList" v-if="item.nameList.length">
								  				{{items.destination_name}} 
								  			</span> 
								  		</p>								  	
								  	</div>
								  </el-col>				  
								  <el-col :span="4">
								 	<el-input size="mini" type="number" v-model="item.start_standard"></el-input>
								  </el-col>				  
								  <el-col :span="4">
								 	<el-input size="mini" type="number" v-model="item.start_fee"></el-input>
								  </el-col>				 
								  <el-col :span="4">
								 	<el-input size="mini" type="number" v-model="item.add_standard"></el-input>
								  </el-col>				  
								  <el-col :span="4">
								 	<el-input size="mini" type="number" v-model="item.add_fee"></el-input>
								  </el-col>
								  <p v-show="">件数需为0至99的整数，费用应为0.00至999.99的数字</p>
								</el-row>
								<!-- 自定义区域的运费  end -->	
								<p class="set-appoint">
									<span style="cursor: pointer;" @click="addNewArea">为指定地区设置运费</span>
								</p>
							</div>
						</div>	
					</div>
					<div class="btn-warrp">
						<el-button type="primary" @click="submitVal">确定</el-button>
						<el-button @click="closeSet">取消</el-button>
					</div>						
				</div>
			</div>
		</div>
		<!-- 弹出框 -->
		<el-dialog title="收货地址" :visible.sync="showDialog">
			<el-transfer v-model="value1" 
		    :props="{
		      key: 'id_area',
		      label: 'name'
		    }"
		    @change="getSelect"
			:data="areaList">
			</el-transfer>
			 <div slot="footer" class="dialog-footer">
		      <el-button @click="showDialog = false">取 消</el-button>
		      <el-button type="primary" @click="selectAreaEnd">确定</el-button>
		    </div>
		</el-dialog>
	</div>
</template>
<script>
	import {getCookie} from '../../../../assets/js/cookie.js'
	export default{
		name : 'Freight',
		data (){
			return{
				loading       : false,
				showDialog    : false, //弹出框的显示
				setShow 	  : false,
				radio   	  : '1',
				startQuantity : '',
				startPrice    : '',
				addQuantity   : '',
				addPrice      : '',
				price         : '',
				areaLength    : [
					{ 	
						 start_standard: '',
						 start_fee: '',
						 add_standard: '' ,
						 add_fee   : '' ,
						 nameList: [] 
					}
				],
				customArea    : '未指定区域',
				nameList      : [],
				data          : [
					{
						label : '选项1',
						value : 1
					},					{
						label : '选项2',
						value : 2
					},					{
						label : '选项3',
						value : 3
					},					{
						label : '选项4',
						value : 4
					},
				],
				initFee        : [], //初始化费用
				value1         : [],
				areaList       : [],
				addAreaList    : []
			}
		},
		computed:{

		},
		props:['datas'],
		mounted(){
			this.uid = getCookie('UID')
			this.token = getCookie('TOKEN')
			this.shop_id = this.datas.id
			this.getEaraList()
			this.getInitFee()
		},
		methods:{
			//控制设置区域的显示
			handleSetShow(){
				this.setShow = true
			},
			//关闭设置
			closeSet(){
				this.setShow = false
			},
			//获取要提交的value
			submitVal(){
				console.log(this.areaLength)
				let data = {}
				if(this.radio === '1'){
					data.mode 	   		= this.radio
					data.start_fee 		= this.price
					data.start_standard = 0
					data.add_standard   = 0
					data.add_fee 	    = 0
					data.special        = 0
					if(!this.price){
						this.$message({message:'请输入运费',type:'warning'})
					}
					this.sendRequest(data)
				}
				if(this.radio === '2'){
					data.mode  	   		= this.radio
					data.start_fee 		= this.startQuantity
					data.start_standard = this.startPrice
					data.add_standard   = this.addQuantity
					data.add_fee 	    = this.addPrice
					data.special        = this.areaLength
					this.sendRequest(data)
				}
			},
			//为指定区域添加运费
			addNewArea(){
				let i = this.areaLength.length + 1 || 1
				this.areaLength.push({
					    start_standard: '',
					    start_fee: '',
                        add_standard: '',
                        add_fee   : '',
                        nameList: []
				})
			},
			//删除指定区域的运费
			deletaArea(index){
				this.areaLength.splice(index,1)
			},
			editArea(index){
				this.itemIndex = index
				this.showDialog = true
			},
			//获取区域（省份）列表
			getEaraList(){
				let info = {
					uid : this.uid,
					token : this.token
				}
				this.$axiosGet('/platform/vdo/getcity.json',info,true).then( res => {
					if(res.code === 200){
						this.areaList = res.data
					}
				})
			},
			//获取所选择的省份
			getSelect(val){
				this.selectAreaList = val
			},
			//点击对话框确定，处理所选择的省份
			selectAreaEnd(){
				this.showDialog = false
				this.areaList.forEach( item => {
					this.selectAreaList.forEach( items => {
						if(items === item.id_area){
							this.areaLength[this.itemIndex].nameList.push({
								destination      : item.id_area,
								destination_name : item.name
							})
						}
					})
				})
				console.log(this.areaLength[this.itemIndex].nameList)
			},
			//获取初始化运费
			getInitFee(){
				this.loading = true
				let url = '/platform/vdo/delivery.json?uid='+this.uid+'&token='+this.token+'&shop_id='+this.shop_id
				this.$axiosPost(url,{},true).then( res => {
					this.loading = false
					if(res.code === 200){
						this.initFee = res.data
					}
					if(res.code === 404){
						this.$message({message:'运费获取失败',type:'error'})
					}
				})
			},
			//设置运费
			sendRequest(data){
				let url = '/platform/vdo/addship.json?uid='+this.uid+'&token='+this.token+'&shop_id='+this.shop_id
				this.$axiosPost(url,data,true).then( res => {
					if(res.code === 200){
						this.$message({message: '运费设置成功',type: 'success'})
					}
					if(res.code === 404){
						this.$message({message:'运费设置失败',type:'error'})
					}
				})
			}

		}
	}
</script>
<style lang="less" scoped>
	@bgColor:#3ca0ec;
	@bgColor1:#f6f8f9;
	.freight{
		text-align: left;
		.desc{	
			position: relative;					
			padding:20px 15px 80px 15px;
			background: @bgColor1; 
			.title{	
				padding: 30px;
				min-height: 120px;						
				background: #fff;
			}
			.btn{
				height: 30px;
				width: 100px;
				line-height: 30px;
				position: absolute;
				right: 50px;
				top:60px;
				background: @bgColor;
				border-radius: 3px;
				text-align: center;
				color: #fff;
				cursor: pointer;
			}
		}
		.set{
			width: 95%;
			margin: 20px auto;
			padding: 0 0 0 40px;
			.set-con{
				margin-top: 30px;
				overflow: hidden;
				.label{
					width: 60px;
					float: left;
					font-size: 14px;
				}
				.right{
					float: left;
					width: 740px;
					margin-left: 20px;
					font-size: 14px;
					.set-ipt{
						padding: 20px 30px;
						margin-top: 15px;
						background: @bgColor1;
						.set-desc{
							margin-bottom: 15px;
							line-height: 30px;
							color: #8da7d0;
						}
						.set-more{
							overflow: hidden;
							.set-title{
								float: left;
								width: 60px;
							}
							.set-form{
								float: left;
								margin-left: 20px;
								padding:0 20px;
								width: 600px;
								background: #fff;
								.set-appoint{
									line-height: 50px;
									cursor: pointer;
									color: #576b95;
								}
								.edit-title{
									line-height: 24px;
								}
								.edit-btn{
									color:#576b95;
									cursor: pointer;
								}
							}
						}
					}
					.btn-warrp{
						width: 160px;
						margin: 30px auto;
					}
				}
			}
		}
	}
</style>